<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <div class="back-btn" @click="goBack">
        <i class="fas fa-arrow-left"></i>
      </div>
      <div class="page-title">商家管理中心</div>
      <div class="top-icon" @click="navigateToOrdersPending">
        <i class="fas fa-bell"></i>
        <div class="notification-badge">{{ pendingOrderCount }}</div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="content">
      <!-- 商家列表卡片 -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-store"></i>
            我的商家
          </div>
        </div>

        <div class="card-body">
          <div v-if="loadingBusinesses" class="loading">
            <i class="fas fa-spinner fa-spin"></i> 加载商家列表中...
          </div>

          <div v-else-if="businesses.length === 0" class="empty-state">
            <i class="fas fa-store"></i>
            <p>暂无商家，请先添加商家</p>
          </div>

          <div v-else class="business-list">
            <!-- 商家列表 -->
            <div
                class="business-item"
                v-for="business in businesses"
                :key="business.id"
                :class="{ active: selectedBusiness && selectedBusiness.id === business.id }"
                @click="selectBusiness(business)"
            >
              <div class="business-header">
                <div>
                  <div class="business-name">{{ business.businessName }}</div>
                  <div class="business-address">{{ business.businessAddress }}</div>
                </div>
                <div class="business-status" :class="business.deleted ? 'inactive' : 'active'">
                  <i class="fas fa-circle"></i>
                  {{ business.deleted ? '已停用' : '营业中' }}
                </div>
              </div>

              <!-- 商家详情编辑区域 -->
              <div class="business-details">
                <div class="form-group">
                  <label for="businessName">商家名称</label>
                  <input
                      type="text"
                      id="businessName"
                      class="form-control"
                      v-model="business.businessName"
                  />
                </div>

                <div class="form-group">
                  <label for="businessAddress">商家地址</label>
                  <input
                      type="text"
                      id="businessAddress"
                      class="form-control"
                      v-model="business.businessAddress"
                  />
                </div>

                <div class="form-group">
                  <label for="orderType">点餐分类</label>
                  <select
                      id="orderType"
                      class="form-control"
                      v-model="business.orderTypeId"
                  >
                    <option value="1">美食</option>
                    <option value="2">早餐</option>
                    <option value="3">跑腿代购</option>
                    <option value="4">汉堡披萨</option>
                    <option value="5">甜品饮品</option>
                    <option value="6">速食简餐</option>
                    <option value="7">地方小吃</option>
                    <option value="8">米粉面馆</option>
                    <option value="9">包子粥铺</option>
                    <option value="10">炸鸡炸串</option>
                  </select>
                </div>

<!--                <div class="form-group">-->
<!--&lt;!&ndash;                  <label>商家图片</label>&ndash;&gt;-->
<!--&lt;!&ndash;                  <div class="image-upload">&ndash;&gt;-->
<!--&lt;!&ndash;                    <div class="upload-preview">&ndash;&gt;-->
<!--&lt;!&ndash;                      <img&ndash;&gt;-->
<!--&lt;!&ndash;                          :src="&ndash;&gt;-->
<!--&lt;!&ndash;                                                    business.businessImg ||&ndash;&gt;-->
<!--&lt;!&ndash;                                                    'https://via.placeholder.com/100x100?text=商家图片'&ndash;&gt;-->
<!--&lt;!&ndash;                                                "&ndash;&gt;-->
<!--&lt;!&ndash;                          alt="商家图片"&ndash;&gt;-->
<!--&lt;!&ndash;                      />&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                    <div class="upload-btn">&ndash;&gt;-->
<!--&lt;!&ndash;                      <button&ndash;&gt;-->
<!--&lt;!&ndash;                          class="btn btn-primary"&ndash;&gt;-->
<!--&lt;!&ndash;                          @click.stop="showImageUpload('business', business)"&ndash;&gt;-->
<!--&lt;!&ndash;                      >&ndash;&gt;-->
<!--&lt;!&ndash;                        <i class="fas fa-camera"></i>更换图片&ndash;&gt;-->
<!--&lt;!&ndash;                      </button>&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->
<!--                </div>-->

                <div class="form-group">
                  <label for="businessExplain">商家介绍</label>
                  <textarea
                      id="businessExplain"
                      class="form-control"
                      v-model="business.businessExplain"
                      rows="3"
                  ></textarea>
                </div>

                <div class="form-row">
                  <div>
                    <div class="form-group">
                      <label for="startPrice">起送费 (¥)</label>
                      <input
                          type="number"
                          id="startPrice"
                          class="form-control"
                          v-model="business.startPrice"
                          step="0.01"
                          min="0"
                      />
                    </div>
                  </div>

                  <div>
                    <div class="form-group">
                      <label for="deliveryPrice">配送费 (¥)</label>
                      <input
                          type="number"
                          id="deliveryPrice"
                          class="form-control"
                          v-model="business.deliveryPrice"
                          step="0.01"
                          min="0"
                      />
                    </div>
                  </div>
                </div>

                <button
                    class="btn btn-success"
                    style="margin-top: 10px"
                    @click.stop="saveBusiness(business)"
                >
                  <i class="fas fa-save"></i>保存商家信息
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品管理卡片 -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-hamburger"></i>
            商品管理
            <span v-if="selectedBusiness" style="font-size: 14px; color: #666; margin-left: 10px;">
                            - {{ selectedBusiness.businessName }}
                        </span>
          </div>
          <button
              class="btn btn-primary"
              style="padding: 8px 12px; width: auto"
              @click="openAddProductModal"
              :disabled="!selectedBusiness"
          >
            <i class="fas fa-plus"></i>新增
          </button>
        </div>

        <div class="card-body">
          <div v-if="!selectedBusiness" class="empty-state">
            <i class="fas fa-store"></i>
            <p>请先选择一个商家</p>
          </div>

          <div v-else-if="loadingFoods" class="loading">
            <i class="fas fa-spinner fa-spin"></i> 加载商品中...
          </div>

          <div v-else-if="foods.length === 0" class="empty-state">
            <i class="fas fa-utensils"></i>
            <p>暂无商品，请添加商品</p>
          </div>

          <div v-else class="product-list">
            <!-- 商品列表 -->
            <template v-for="food in foods" :key="food.foodId">
              <div class="product-item" v-if="food.deleted === false || food.deleted === null">
                <div class="product-tag" v-if="food.remarks === '热销'">热销</div>
                <div
                    class="product-tag"
                    v-else-if="food.remarks === '新品'"
                    style="background-color: #4caf50"
                >
                  新品
                </div>
                <div
                    class="product-tag"
                    v-else-if="food.remarks === '特价'"
                    style="background-color: #ff9800"
                >
                  特价
                </div>

                <div class="product-image">
                  <img
                      :src="food.foodImg || 'https://via.placeholder.com/120x120?text=商品图片'"
                      :alt="food.foodName"
                  />
                </div>
                <div class="product-info">
                  <div class="product-name">{{ food.foodName }}</div>
                  <div class="product-price">¥{{ food.foodPrice.toFixed(2) }}</div>
                  <div class="product-actions">
                    <div class="action-btn edit-btn" @click="openEditProductModal(food)">
                      编辑
                    </div>
                    <div class="action-btn delete-btn" @click="deleteFood(food)">
                      删除
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-bar">
      <div
          class="bottom-btn"
          :class="{ active: activeTab === 'home' }"
          @click="setActiveTab('home')"
      >
        <i class="fas fa-home"></i>
        <span>首页</span>
      </div>

      <div
          class="bottom-btn"
          :class="{ active: activeTab === 'orders' }"
          @click="setActiveTab('orders')"
      >
        <i class="fas fa-clipboard-list"></i>
        <span>订单</span>
      </div>
      <div
          class="bottom-btn"
          :class="{ active: activeTab === 'data' }"
          @click="setActiveTab('data')"
      >
        <i class="fas fa-chart-line"></i>
        <span>数据</span>
      </div>
      <div
          class="bottom-btn"
          :class="{ active: activeTab === 'profile' }"
          @click="setActiveTab('profile')"
      >
        <i class="fas fa-user"></i>
        <span>我的</span>
      </div>
    </div>

    <!-- 商品模态框 -->
    <div class="modal" :class="{ active: showProductModal }">
      <div class="modal-content">
        <div class="modal-header">
          {{ modalTitle }}
          <div class="modal-close" @click="closeModal">
            <i class="fas fa-times"></i>
          </div>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="productName">商品名称</label>
            <input
                type="text"
                id="productName"
                class="form-control"
                placeholder="请输入商品名称"
                v-model="currentFood.foodName"
            />
          </div>

          <div class="form-group">
            <label for="productPrice">价格 (¥)</label>
            <input
                type="number"
                id="productPrice"
                class="form-control"
                placeholder="0.00"
                step="0.01"
                min="0"
                v-model="currentFood.foodPrice"
            />
          </div>

          <div class="form-group">
            <label for="productCategory">商品分类</label>
            <select
                id="productCategory"
                class="form-control"
                v-model="currentFood.remarks"
            >
              <option value="">选择分类</option>
              <option value="主食">主食</option>
              <option value="凉菜">凉菜</option>
              <option value="汤类">汤类</option>
              <option value="饮品">饮品</option>
              <option value="小吃">小吃</option>
            </select>
          </div>

          <div class="form-group">
            <label for="foodExplain">商品描述</label>
            <textarea
                id="foodExplain"
                class="form-control"
                placeholder="请输入商品描述"
                v-model="currentFood.foodExplain"
                rows="2"
            ></textarea>
          </div>

          <div class="form-group">
            <label>商品图片</label>
            <div class="image-upload">
              <div class="upload-preview">
                <img
                    :src="
                                        currentFood.foodImg ||
                                        'https://via.placeholder.com/100x100?text=商品图片'
                                    "
                    alt="商品图片"
                />
              </div>
              <div class="upload-btn">
                <button
                    class="btn btn-primary"
                    @click="showImageUpload('food')"
                >
                  <i class="fas fa-upload"></i>上传图片
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn cancel-btn" @click="closeModal">取消</button>
          <button class="modal-btn confirm-btn" @click="saveFood">
            {{ modalAction }}
          </button>
        </div>
      </div>
    </div>

    <!-- 图片上传模态框 -->
<!--    <div class="modal" :class="{ active: showImageModal }">-->
<!--      <div class="modal-content">-->
<!--        <div class="modal-header">-->
<!--          {{ imageModalTitle }}-->
<!--          <div class="modal-close" @click="closeImageModal">-->
<!--            <i class="fas fa-times"></i>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="modal-body">-->
<!--          <div class="form-group">-->
<!--            <label>图片URL</label>-->
<!--            <input-->
<!--                type="text"-->
<!--                class="form-control"-->
<!--                placeholder="输入图片URL地址"-->
<!--                v-model="imageUrl"-->
<!--            />-->
<!--          </div>-->
<!--          <p style="text-align: center; margin: 15px 0; color: #777">或</p>-->
<!--          <div class="form-group">-->
<!--            <label>从本地上传</label>-->
<!--            <input-->
<!--                type="file"-->
<!--                class="form-control"-->
<!--                @change="handleImageUpload"-->
<!--            />-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="modal-footer">-->
<!--          <button class="modal-btn cancel-btn" @click="closeImageModal">-->
<!--            取消-->
<!--          </button>-->
<!--          <button class="modal-btn confirm-btn" @click="saveImage">确认</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 通知 -->
    <div v-if="showNotification" class="notification">
      <i class="fas fa-check-circle"></i> {{ notificationMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { businessAPI } from '@/api/business.js'
import { foodAPI } from '@/api/food.js'
import { orderAPI } from '@/api/order.js'
import {removeSessionStorage, setSessionStorage} from "@/common";

const router = useRouter()

// 响应式数据
const businesses = ref([])
const selectedBusiness = ref(null)
const loadingBusinesses = ref(false)
const foods = ref([])
const loadingFoods = ref(false)
const showProductModal = ref(false)
const showImageModal = ref(false)
const activeTab = ref('home')
const showNotification = ref(false)
const notificationMessage = ref('')
const imageUrl = ref('')
const currentImageType = ref('') // 'business' 或 'food'
const currentBusinessForImage = ref(null) // 当前操作的商家对象（用于图片上传）
const pendingOrderCount = ref(0)
const currentFood = ref({
  foodId: '',
  foodName: '',
  foodPrice: 0,
  remarks: '',
  foodExplain: '',
  foodImg: ''
})

// 计算属性
const modalTitle = computed(() => {
  return currentFood.value.foodId ? '编辑商品' : '新增商品'
})

const modalAction = computed(() => {
  return currentFood.value.foodId ? '保存修改' : '添加商品'
})

const imageModalTitle = computed(() => {
  return currentImageType.value === 'business' ? '上传商家图片' : '上传商品图片'
})

// 生命周期
onMounted(() => {
  loadBusinesses()
  loadPendingOrderCount()
})

// 获取当前商家ID（从sessionStorag中获取）
const getCurrentBusinessId = () => {
  const businessInfo = JSON.parse(sessionStorage.getItem('business') || '{}')
  return businessInfo.id || businessInfo.businessId || '1'
}

// 加载商家列表
const loadBusinesses = async () => {
  try {
    loadingBusinesses.value = true
    const response = await businessAPI.getBusinesses()

    if (response.data && response.data.success) {
      const businessesData = response.data.data || response.data
      businesses.value = Array.isArray(businessesData) ? businessesData : []
      // console.log(businesses.value)
      const userId=parseInt(sessionStorage.getItem('userId'))
      // console.log(userId)
      businesses.value=businesses.value.filter(item=>item.businessOwner.id===userId)
      // 如果有商家数据，默认选择第一个
      if (businesses.value.length > 0 && !selectedBusiness.value) {
        selectBusiness(businesses.value[0])
      }
    } else {
      businesses.value = []
    }
  } catch (error) {
    console.error('加载商家列表失败:', error)
    businesses.value = []
    showNotificationMessage('加载商家列表失败')
  } finally {
    loadingBusinesses.value = false
  }
}
// 加载待处理订单数量
const loadPendingOrderCount = async () => {
  try {
    const businessId = getCurrentBusinessId()
    const response = await orderAPI.listOrdersByBusinessId(businessId)

    if (response.data && response.data.success) {
      const ordersData = response.data.data || response.data
      const orders = Array.isArray(ordersData) ? ordersData : []
      // 统计待处理订单数量（状态为0）
      pendingOrderCount.value = orders.filter(order => order.orderState === 0).length
    }
  } catch (error) {
    console.error('加载待处理订单数量失败:', error)
    pendingOrderCount.value = 0
  }
}

// 跳转到订单页面的待处理标签
const navigateToOrdersPending = () => {
  router.push('/business-orders?tab=pending')
}

// 选择商家
const selectBusiness = (business) => {
  selectedBusiness.value = business
  removeSessionStorage('business')
  setSessionStorage('business', selectedBusiness.value)
  loadFoods()
}

// 加载商品列表
const loadFoods = async () => {
  if (!selectedBusiness.value) return

  try {
    loadingFoods.value = true
    const businessId= selectedBusiness.value.id || selectedBusiness.value.businessId
    // console.log(businessId)
    const response = await foodAPI.getAllFoods(businessId,1)
    // console.log(response)
    if (response.data && response.data.success) {
      // 根据实际API响应结构调整
      const foodsData = response.data.data || response.data
      foods.value = Array.isArray(foodsData) ? foodsData : []
      const business=JSON.parse(sessionStorage.getItem('business'))
      // console.log(foods.value)
      foods.value=foods.value.filter(item=>item.business.id===business.id)
      console.log(foods.value)
    } else {
      foods.value = []
    }
  } catch (error) {
    console.error('加载商品列表失败:', error)
    foods.value = []
    showNotificationMessage('加载商品列表失败')
  } finally {
    loadingFoods.value = false
  }
}

// 保存商家信息
const saveBusiness = async (business) => {
  try {
    const businessId = business.id || business.businessId
    const userId=sessionStorage.getItem('userId')
    const updateData = {
      businessName: business.businessName,
      businessAddress: business.businessAddress,
      businessOwner:{
        id:userId
      },
      orderTypeId: parseInt(business.orderTypeId) || 1,
      businessExplain: business.businessExplain,
      startPrice: parseFloat(business.startPrice) || 0,
      deliveryPrice: parseFloat(business.deliveryPrice) || 0,
      remarks: business.remarks
    }

    const response = await businessAPI.updateBusiness(businessId, updateData)

    if (response.data && response.data.success) {
      showNotificationMessage('商家信息保存成功')
      // 刷新商家列表
      loadBusinesses()
    } else {
      throw new Error(response.data?.message || '保存失败')
    }
  } catch (error) {
    console.error('保存商家信息失败:', error)
    showNotificationMessage(error.message || '保存商家信息失败')
  }
}

// 打开添加商品模态框
const openAddProductModal = () => {
  currentFood.value = {
    foodId: '',
    foodName: '',
    foodPrice: 0,
    remarks: '',
    foodExplain: '',
    foodImg: ''
  }
  showProductModal.value = true
}

// 打开编辑商品模态框
const openEditProductModal = (food) => {
  currentFood.value = {
    ...food,
    foodId: food.id,
    foodPrice: parseFloat(food.foodPrice) || 0
  }
  // console.log(currentFood.value)
  showProductModal.value = true
}

// 关闭模态框
const closeModal = () => {
  showProductModal.value = false
}

// 保存商品（新增或编辑）
const saveFood = async () => {
  try {
    if (!selectedBusiness.value) {
      showNotificationMessage('请先选择商家')
      return
    }

    const foodData = {
      foodName: currentFood.value.foodName,
      foodPrice: parseFloat(currentFood.value.foodPrice) || 0,
      remarks: currentFood.value.remarks,
      foodExplain: currentFood.value.foodExplain,
      foodImg: currentFood.value.foodImg,
      business:{
        id:selectedBusiness.value.id || selectedBusiness.value.businessId,
      }
    }

    let response
    if (currentFood.value.foodId) {
      // 编辑现有商品
      response = await foodAPI.updateFood(currentFood.value.foodId, foodData)
    } else {
      // 新增商品
      response = await foodAPI.addFood(foodData)
    }

    if (response.data && response.data.success) {
      showNotificationMessage(currentFood.value.foodId ? '商品修改成功' : '商品添加成功')
      closeModal()
      loadFoods() // 重新加载商品列表
    } else {
      throw new Error(response.data?.message || '操作失败')
    }
  } catch (error) {
    console.error('保存商品失败:', error)
    showNotificationMessage(error.message || '保存商品失败')
  }
}

// 删除商品
const deleteFood = async (food) => {
  if (!confirm('确定要删除这个商品吗？')) {
    return
  }

  try {
    console.log(food)
    const response = await foodAPI.updateFood(food.id, {
      foodName:food.foodName,
      foodPrice:parseFloat(food.foodPrice) || 0,
      deleted: true,
      remarks: '已删除'
    })

    if (response.data && response.data.success) {
      showNotificationMessage('商品删除成功')
      loadFoods() // 重新加载商品列表
    } else {
      throw new Error(response.data?.message || '删除失败')
    }
  } catch (error) {
    console.error('删除商品失败:', error)
    showNotificationMessage(error.message || '删除商品失败')
  }
}

// // 显示图片上传模态框
const showImageUpload = (type, business = null) => {
  currentImageType.value = type
  currentBusinessForImage.value = business

  if (type === 'business' && business) {
    imageUrl.value = business.businessImg
  } else {
    imageUrl.value = currentFood.value.foodImg
  }
  showImageModal.value = true
}

// 关闭图片上传模态框
const closeImageModal = () => {
  showImageModal.value = false
  imageUrl.value = ''
  currentBusinessForImage.value = null
}

// 处理图片上传
const handleImageUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    // 这里应该实现图片上传到服务器的逻辑
    // 暂时使用本地URL预览
    const reader = new FileReader()
    reader.onload = (e) => {
      imageUrl.value = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

// 保存图片
const saveImage = () => {
  if (currentImageType.value === 'business' && currentBusinessForImage.value) {
    currentBusinessForImage.value.businessImg = imageUrl.value
  } else {
    currentFood.value.foodImg = imageUrl.value
  }
  closeImageModal()
  showNotificationMessage('图片上传成功')
}

// 显示通知消息
const showNotificationMessage = (message) => {
  notificationMessage.value = message
  showNotification.value = true
  setTimeout(() => {
    showNotification.value = false
  }, 3000)
}

// 导航功能
const goBack = () => {
  router.go(-1)
}

// 跳转到钱包页面
const goToWallet = () => {
  router.push('/wallet')
}

const setActiveTab = (tab) => {
  activeTab.value = tab
  // 这里可以根据tab跳转到不同页面或加载不同数据
  switch (tab) {
    case 'home':
      break
    case 'orders':
      router.push('/business-orders')
      break
    case 'data':
      router.push('/business-data')
      break
    case 'profile':
      router.push('/business-profile')
      break
  }
}
</script>

<style scoped>
/* 顶部导航 */
.top-bar {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: 360px;
  height: 50px;
  background: linear-gradient(90deg, #0088ff, #00bbff);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 15px;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.back-btn {
  font-size: 18px;
  margin-right: 15px;
  cursor: pointer;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  flex: 0.9;
}

.top-icon {
  font-size: 18px;
  margin-left: 15px;
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #ff5252;
  color: white;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主内容区域 */
.content {
  padding: 15px;
  padding-bottom: 70px;
}

/* 卡片样式 */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  overflow: hidden;
}

.card-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
}

.card-title i {
  margin-right: 8px;
  color: #0097ff;
}

.card-body {
  padding: 15px;
}

/* 商家列表 */
.business-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.business-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #eee;
}

.business-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.business-item.active {
  border-color: #0097ff;
  background-color: #f0f8ff;
}

.business-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.business-name {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.business-address {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.business-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #666;
}

.business-status.active {
  color: #4caf50;
}

.business-status.inactive {
  color: #ff9800;
}

.business-details {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
  display: none;
}

.business-item.active .business-details {
  display: block;
}

/* 表单样式 */
.form-group {
  margin-top: 4px;
}

.form-group label {
  display: block;
  font-weight: 500;
  color: #555;
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.form-control:focus {
  border-color: #0097ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 151, 255, 0.2);
}

/* 图片上传 */
.image-upload {
  display: flex;
  align-items: center;
  gap: 15px;
}

.upload-preview {
  width: 100px;
  height: 100px;
  border: 1px dashed #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f8f9fa;
}

.upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-btn {
  flex: 1;
}

/* 按钮样式 */
.btn {
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 5px;
}

.btn i {
  margin-right: 8px;
}

.btn-primary {
  background-color: #0097ff;
  color: white;
}

.btn-primary:active {
  background-color: #0081e0;
  transform: translateY(1px);
}

.btn-success {
  background-color: #00c853;
  color: white;
}

.btn-success:active {
  background-color: #00b347;
  transform: translateY(1px);
}

.btn-danger {
  background-color: #ff5252;
  color: white;
}

.btn-danger:active {
  background-color: #e53935;
  transform: translateY(1px);
}

.btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* 商品列表 */
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.product-item {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
  height: 120px;
  width: 100%;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 10px;
}

.product-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  color: #ff5339;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
}

.product-actions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.action-btn {
  flex: 1;
  padding: 6px;
  border-radius: 5px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.edit-btn {
  background-color: #e3f2fd;
  color: #0097ff;
}

.edit-btn:active {
  background-color: #bbdefb;
}

.delete-btn {
  background-color: #ffebee;
  color: #ff5252;
}

.delete-btn:active {
  background-color: #ffcdd2;
}

.product-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #ff5339;
  color: white;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  font-weight: bold;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 396px;
  height: 60px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.bottom-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: #666;
  font-size: 12px;
  text-align: center;
  transition: color 0.2s;
}

.bottom-btn i {
  font-size: 20px;
  margin-bottom: 3px;
}

.bottom-btn.active {
  color: #0097ff;
}

.bottom-btn:active {
  transform: scale(0.95);
}

/* 模态框 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.modal.active {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  background-color: white;
  width: 90%;
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s;
}

.modal.active .modal-content {
  transform: translateY(0);
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  position: relative;
}

.modal-close {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
  color: #777;
}

.modal-body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.modal-footer {
  padding: 15px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #eee;
}

.modal-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-btn:active {
  transform: translateY(1px);
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #333;
}

.cancel-btn:active {
  background-color: #e0e0e0;
}

.confirm-btn {
  background-color: #0097ff;
  color: white;
}

.confirm-btn:active {
  background-color: #0081e0;
}

.empty-state {
  text-align: center;
  padding: 20px;
  color: #777;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #ddd;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #0097ff;
}

.notification {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background-color: #4caf50;
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 300;
  animation: slideIn 0.3s, fadeOut 0.5s 2.5s;
}

@keyframes slideIn {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 60px;
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.form-row {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.form-row > div {
  flex: 1;
}
</style>
